// 上传图片
// 第一步添加页面内容 第二步追加到路由

// 新增图片
import Base from "../base.js";
import MoviesApi from "../../api/movies.js";
export default class extends Base {
    // props new拿到到参数 
    constructor(props) {
        super(props);
        this.data = {
            student: {
                _id: props._id,
            },
        }
    }
    // 函数渲染
    render() {
        this.$el.html(`
        <div>
            <h1 style="font-size:23px; text-align:center; line-height: 100px;height: 100px;">图片上传</h1>
            <table style="display:-webkit-box; flex-flow:wrap;margin: auto 100px;border: groove;padding:50px 100px;">
                <tr>
                    <td style="font-size:20px;font-weight:bold;">电影名称:</td>
                    <td class="movies-name" style="font-size:20px;font-weight:bold;"></td>
                </tr>
                <!--海报列表  -->
                <tr style="height:200px">
                    <td style="font-size:20px;font-weight:bold;">电影海报</td>
                    <td>
                        <button type="button" class="layui-btn" id="upload-poster">
                        <i class="layui-icon">&#xe67c;</i>电影海报
                        </button>
                    </td>
                </tr>       
                    <td></td>
                <td class="poster"></td>
                <tr>
                    <!--剧集列表  -->
                    <tr style="height:200px">
                        <td style="font-size:20px;font-weight:bold;">剧集列表</td>
                        <td>
                        <button type="button" class="layui-btn" id="upload-btn">
                            <i class="layui-icon">&#xe67c;</i>剧集图片
                        </button>
                        </td>
                    </tr>
                    <td></td>
                    <td class="imgs"></td>
                </tr>
                <tr>
                <td>
                <button name="revise-btn" class="layui-btn " id="Submit" >提交</button>
                </td>
            </table>
            <div style="text-align: center;">
           
            </div>
        </div>
    `);
        this.$SubmitBtn = $("#Submit"); //提交按钮
        this.$moviesNameEle = $(".movies-name");// 电影名称
        this.$imgsEle = $(".imgs");// 剧集图片
        this.$posterEle = $(".poster");// 获取海报按钮
    }

    // 再次渲染让用户的数据渲染到页面
    rerender() {
        const { cname} = this.data.student;
        this.$moviesNameEle.html(cname);
        const imgStr = _.map(this.data.student.imgs, item => {
            return `<img style="width:100px; height:100px;" src="/resource${item}" />`
        }).join("");
        const posterStr=_.map(this.data.student.poster,item=>{
            return `<img style="width:100px; height:100px;" src="/resource${item}" />`
        }).join("")
        this.$posterEle.html(posterStr)
        this.$imgsEle.html(imgStr);
    }
    // 提交按钮 
    Submit() {
        location.hash = `#/info/movies`;
    }
    // 点击删除图片
    async delete(e) {
        const { _id } = this.data.student;
        // replace 替换
        const url = $(e.target).attr("src").replace("/resource", "");
        console.log(url);
        this.data.student = await MoviesApi.deleteImg({ _id, url });
        this.rerender();
    }


    // 点击删除海报
    async poster(e) {
        const { _id } = this.data.student;
        // replace 替换
        const url = $(e.target).attr("src").replace("/resource", "");
        console.log(url);
        this.data.student = await MoviesApi.deletePoster({ _id, url });
        this.rerender();

    }


    // 获取需要上传信息的电影
    async getOne() {
        const { _id } = this.data.student;
        this.data.student = await MoviesApi.getOne(_id);
        console.log(this.data.student)
    }


    // 当render结束 mounted开始
    async mounted() {
        // 调用getOne
        await this.getOne();
        this.rerender();
    }



    // 添加事件
    handle() {
        // 引入layui
        this.upload = layui.upload;
        // 剧集
        this.upload.render({
            elem: '#upload-btn' //绑定元素
            , url: '/resource/movies/upload/' //上传接口
            , data: {
                _id: () => {
                    return this.data.student._id; //拿到电影的id
                }
            }
            , multiple: true  //是否允许多文件上传
            // 上传成功之后对回调函数
            , done: res => {
                //上传完毕回调
                this.data.student = res;
                this.rerender();
            }
            , error: function () {
                //请求异常回调
            }
        });

        // 海报
        this.upload.render({
            elem: '#upload-poster' //绑定元素
            , url: '/resource/movies/uploadPoster/' //上传接口
            , data: {
                _id: () => {
                    return this.data.student._id; //拿到电影的id
                }
            }
            , multiple: false  //是否允许多文件上传
            // 上传成功之后对回调函数
            , done: res => {
                //上传完毕回调
                this.data.student = res;
                this.rerender();
            }
            , error: function () {
                //请求异常回调
            }
        });
        // 点击图片的时候删除
        this.$imgsEle.on("click", "img", this.delete.bind(this));
        // 点击海报的时候删除
        this.$posterEle.on("click", "img", this.poster.bind(this));
        // 提交跳转页面
        this.$SubmitBtn.on("click", this.Submit.bind(this));
    };
}
